<!DOCTYPE html>
<html lang="en">
	<head>
		<link
			href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.css"
			rel="stylesheet"
		/>
		<style>
			html,
			body {
				height: 100%;
				width: 100%;
			}
			.map {
				height: 100%;
				width: 100%;
			}
			.ol-popup {
				position: absolute;
				background-color: white;
				-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
				filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
				padding: 15px;
				border-radius: 10px;
				border: 1px solid #cccccc;
				bottom: 12px;
				left: -50px;
				min-width: 280px;
			}
			.ol-popup:after,
			.ol-popup:before {
				top: 100%;
				border: solid transparent;
				content: ' ';
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
			}
			.ol-popup:after {
				border-top-color: white;
				border-width: 10px;
				left: 48px;
				margin-left: -10px;
			}
			.ol-popup:before {
				border-top-color: #cccccc;
				border-width: 11px;
				left: 48px;
				margin-left: -11px;
			}
			.ol-popup-closer {
				text-decoration: none;
				position: absolute;
				top: 2px;
				right: 8px;
			}
			.ol-popup-closer:after {
				content: '✖';
			}
		</style>
		<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.js"></script>
		<title>OpenLayers example</title>
	</head>
	<body>
		<div id="map" class="map"></div>
		<div id="popup" class="ol-popup">
			<a href="#" id="popup-closer" class="ol-popup-closer"></a>
			<div id="popup-content"></div>
		</div>
	</body>
</html>
<script type="text/javascript">
	let container = document.getElementById('popup');
	let content = document.getElementById('popup-content');
	let closer = document.getElementById('popup-closer');

	let overlay = new ol.Overlay({
		element: container,
		autoPan: true,
		autoPanAnimation: {
			duration: 250,
		},
	});

	closer.onclick = function () {
		overlay.setPosition();
		closer.blur();
		return false;
	};

	const circleLayer = new ol.layer.Vector({
		source: new ol.source.Vector({
			features: [
				new ol.Feature({
					geometry: new ol.geom.Point(
						ol.proj.fromLonLat([116.359506, 35.30292])
					),
				}),
			],
		}),
		style: new ol.style.Style({
			image: new ol.style.Circle({
				radius: 5,
				fill: new ol.style.Fill({
					color: 'red',
				}),
				stroke: new ol.style.Stroke({
					color: 'red',
					size: 1,
				}),
			}),
		}),
	});

	let map = new ol.Map({
		target: 'map',
		view: new ol.View({
			center: ol.proj.fromLonLat([116.359506, 35.30292]),
			zoom: 4,
		}),
		overlays: [overlay],
		layers: [
			new ol.layer.Tile({
				source: new ol.source.OSM(),
			}),
			circleLayer,
		],
	});

	map.on('click', (evt) => {
		let point = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
			return feature;
		});
		if (point) {
			let coordinate = evt.coordinate;
			let hdms = ol.coordinate.toStringHDMS(
				ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326')
			);

			content.innerHTML = '<p>You clicked Me:</p><code>' + hdms + '</code>';
			overlay.setPosition(coordinate);
		}
	});
</script>
